<template>
  <div class="GiftRecords">
    <el-card>
      <h3><span class="tag"></span> 送礼记录</h3>
      <div class="searchBox">
        <span class="txt">送礼时间：</span>
        <el-date-picker
          size="small"
          v-model="timeArr"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="timeOptions"
          value-format="yyyy-MM-dd"
          @change="focusA"
        >
        </el-date-picker>
        <span class="margin"></span>
        <span class="txt">送礼用户ID：</span>
        <el-input v-model="userID" clearable size="small"></el-input>
        <el-button
          class="btn"
          icon="el-icon-search"
          size="small"
          @click="search"
          >查询搜索</el-button
        >
      </div>
      <div class="typeBox">
        <div></div>
        <div class="right">
          <!-- <el-button icon="el-icon-paperclip" size="small">导出EXCEL</el-button> -->
        </div>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%; margin-top: 10px"
        :header-cell-style="{ background: '#f5f7fa' }"
      >
        <template slot="empty">
          <el-empty :image-size="200"></el-empty>
        </template>
        <el-table-column label="送礼人头像">
          <template slot-scope="scope">
            <el-image
              class="avatar"
              :src="scope.row.giverAvatar"
              :preview-src-list="[scope.row.giverAvatar]"
              fit="cover"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="giverId" label="送礼人人ID"> </el-table-column>
        <el-table-column prop="giverNickname" label="送礼人昵称">
        </el-table-column>
        <!-- <el-table-column prop="address" label="送礼人手机号"> </el-table-column> -->
        <el-table-column prop="address" label="收礼人头像">
          <template slot-scope="scope">
            <el-image
              class="avatar"
              :src="scope.row.avatar"
              :preview-src-list="[scope.row.avatar]"
              fit="cover"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="userId" label="收礼人ID"> </el-table-column>
        <el-table-column prop="nickname" label="收礼人昵称"> </el-table-column>
        <!-- <el-table-column prop="address" label="收礼人手机号"> </el-table-column> -->
        <el-table-column prop="giftName" label="礼物名称"> </el-table-column>
        <el-table-column prop="typeString" label="礼物名称">
          <template slot-scope="scope">
            {{
              scope.row.typeString == 1
                ? "普通礼物"
                : scope.row.typeString == 2
                ? "公告礼物"
                : "连击礼物"
            }}
          </template>
        </el-table-column>
        <el-table-column prop="giftNumber" label="礼物数量"> </el-table-column>
        <el-table-column prop="price" label="礼物价值"> </el-table-column>
        <el-table-column prop="createTime" label="送礼时间"> </el-table-column>
      </el-table>
      <pagination
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import { userGiveGiftRecord } from "@/api/operationManagement";
export default {
  components: { Pagination },
  data() {
    return {
      loading: false,
      timeArr: [],
      startDate: "",
      endDate: "",
      userID: "",
      tableData: [],
      total: 0,
      page: 1,
      pageSize: 10,
      timeOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  methods: {
    //选着时间
    focusA(time) {
      if (!this.timeArr) {
        this.timeArr = [];
      }
      this.startDate = this.timeArr[0];
      this.endDate = this.timeArr[1];
    },
    async getList() {
      this.loading = true;
      const res = await userGiveGiftRecord({
        page: this.page,
        pageSize: this.pageSize,
        userId: this.userID,
        startTime: this.startDate,
        endTime: this.endDate,
      });
      this.loading = false;
      if (res.code == 0) {
        this.tableData = res.data.list;
        this.total = parseInt(res.data.total);
      }
    },
    search() {
      this.page = 1;
      this.getList();
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style lang="less" scoped>
.GiftRecords {
  padding: 20px;
  h3 {
    margin: 0 0;
    display: flex;
    align-items: center;
    .tag {
      display: inline-block;
      width: 5px;
      height: 18px;
      background-color: #7b94d8;
      margin-right: 10px;
    }
  }
  .searchBox {
    display: flex;
    align-items: center;
    margin: 20px 0;
    .margin {
      margin: 0 10px;
    }
    .txt {
      display: inline-block;
      height: 32px;
      background-color: #f5f7fa;
      line-height: 32px;
      padding-left: 10px;
      color: #9d9399;
      border-radius: 4px 0 0 4px;
      border: 1px solid #dcdfe6;
      border-right: none;
    }
    /deep/ .el-input__inner {
      border-radius: 0 4px 4px 0 !important;
    }
    .el-input {
      width: 200px;
    }
  }
  .typeBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .plcz {
    margin-left: 0 !important;
  }
  .avatar {
    width: 70px;
    height: 70px;
    border-radius: 5px;
  }
}
</style>